<template>
  <div class="container">
    <div class="siderMenu">
      <SiderMenu @func="changeMenu"></SiderMenu>
    </div>
    <div class="content">
      <div class="header">
        <div class="userName">
          <a-dropdown>
            <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
              {{ userNameText }}
              <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="logOut">退出</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
      </div>
      <div class="card">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
import SiderMenu from './components/SiderMenu'
export default {
  components: {
    SiderMenu
  },
  data() {
    return {
      userNameText: ''
    }
  },
  mounted() {
    this.getUserName()
  },
  methods: {
    // 获取用户名
    getUserName() {
      // 获取用户信息
      // const vm = this
      const userName = JSON.parse(sessionStorage.getItem('data')).data.userName
      this.userNameText = userName
      // getUserInfo(userId).then((res) => {
      //   console.log('getUserInfo', res)
      //   vm.userNameText = res.data.username
      // })
    },
    // 侧边栏点击跳转
    changeMenu(data) {
      console.log('data', data)
      if (data === '') {
        data = 'fanInfo'
        console.log('data2', data)
      }
      this.$router.push(`/Index/${data}`)
    },
    // 退出
    logOut() {
      sessionStorage.setItem('data', JSON.stringify(''))
      this.$router.push('/')
    }
  }
}
</script>
<style>
.container {
  display: flex;
  height: 100vh;
  width: 100vw;
}
/* 侧边栏 */
.container .siderMenu {
  display: flex;
  flex-direction: column;
  flex: 0.14;
  z-index: 8;
  height: 100%;
  box-shadow: 8px 0px 10px rgba(3, 57, 165, 0.06);
  background-color: #fff;
}
/* 主内容 */
.container .content {
  display: flex;
  flex-direction: column;
  flex: 0.86;
}
/* 头部 */
.content .header {
  flex: 0.055;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  background: rgb(59, 103, 191);
  z-index: 9;
  height: 60px;
  background-color: #fff;
  box-shadow: 0px 8px 10px rgba(3, 57, 165, 0.06);
}
.header .userName {
  padding: 0 27px;
  border-left: 2px solid #eeeef4;
}
.header .userName .ant-dropdown-link {
  font-size: 18px;
  color: black;
}
/* 表格Card */
.content .card {
  flex: 0.945;
}
</style>
